<template>
	<Echart :options="option" class="right_top_inner" ref="charts1" />
</template>

<script>
import { ycHis, getgraph } from "@/api/modules/home.js";

import { graphic } from "echarts";
export default {
	props: ["sjlist"],
	data() {
		return {
			option: {},
		};
	},
	mounted() {
		// 设置true清空echart缓存
		this.getData();
	},
	methods: {
		getData() {
			getgraph({
				devId: this.$store.state.oldUserInfo.companyId,
				sampleName: "有功功率",
			}).then((res) => {
				if (res.code == 200) {
					let xData = [];
					let ygList = [];
					let data = res.data;
					for (let index = 0; index < data.length; index++) {
						let element = data[index];
						xData.push(element.date);
						ygList.push(
							element.graphHisDTO ? element.graphHisDTO.value.toFixed(2) : ""
						); //实时有效功率
						// wgList.push(element.pvPVal) //实时无效功率
						// maxygList.push()
						// maxwgList.push()
					}
					this.$nextTick(() => {
						this.init(xData, ygList, this.$store.state.oldUserInfo.fullName);
					});
				} else {
					this.$Message({
						text: res.msg,
						type: "warning",
					});
				}
			});
			// ycHis({ substationId: this.$store.state.oldUserInfo.companyId }).then((res) => {
			//   if (!this.timer) {
			//     // console.log("报警次数", res);
			//   }
			//   if (res.code == 200) {
			//     let xData = []
			//     let ygList = []
			//     // let wgList = []
			//     let maxygList = []
			//     let maxwgList = []
			//     let data = res.data
			//     // let xData = ['0:00:00', '1:00:00', '2:00:00', '3:00:00', '4:00:00', '5:00:00', '6:00:00', '7:00:00', '8:00:00', '9:00:00', '10:00:00', '11:00:00', '12:00:00', '13:00:00', '14:00:00', '15:00:00', '16:00:00', '17:00:00', '18:00:00', '19:00:00', '20:00:00', '21:00:00', '22:00:00', '23:00:00']
			//     // let ygList = ['25.41', '12.15', '24.73', '2.67', '27.80', '23.60', '19.60', '7.80', '21.60', '15.73', '29.30', '5.40', '7.60', '22.30', '11.0260', '23.50', '27.11', '25.90', '15.60', '10.60', '29.90', '23.40', '21.60', '26.50']
			//     // let wgList = ['6.96', '9.4750', '2.05', '9.70', '3.90', '5.10', '2.50', '5.30', '1.50', '0.66', '6.20', '7.70', '7.50', '2.60', '8.32', '4.9950', '3.50', '4.04', '8.87', '7.90', '9.50', '7.00', '0.90', '0.90']

			//     for (let index = 0; index < data.length; index++) {
			//       let element = data[index];
			//       xData.push(element.date)
			//       ygList.push(element.sampleHisDTO.length > 0 ? element.sampleHisDTO[0]['value33'] : '') //实时有效功率
			//       // wgList.push(element.pvPVal) //实时无效功率
			//       // maxygList.push()
			//       // maxwgList.push()
			//     }
			//     this.$nextTick(() => {
			//       this.init(xData, ygList, this.$store.state.oldUserInfo.fullName)
			//       this.switper();
			//     });
			//   } else {
			//     this.pageflag = false;
			//     this.$Message({
			//       text: res.msg,
			//       type: "warning",
			//     });
			//   }
			// })
		},
		init(xData, yData, cname) {
			this.option = {
				legend: {
					x: "center", //可设定图例在左、右、居中
					y: "10px",
					data: ["有功功率"],
					textStyle: {
						fontSize: 12,
						color: "#F1F1F3",
					},
				},
				xAxis: {
					type: "category",
					data: xData,
					boundaryGap: false, // 不留白，从原点开始
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						// show:false,
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				yAxis: {
					name: "单位：MW",
					nameTextStyle: {
						color: "#fff",
						fontSize: 12,
					},

					type: "value",
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
					formatter: function (params) {
						var result = params[0].name + "<br/>";
						params.forEach(function (item) {
							result += item.seriesName + ": " + item.value + "MW<br/>";
						});
						return result;
					},
				},
				grid: {
					//布局
					show: true,
					left: "30px",
					right: "30px",
					bottom: "10px",
					top: "48px",
					containLabel: true,
					borderColor: "#1F63A3",
				},
				series: [
					{
						data: yData,
						type: "line",
						symbol: "none",
						itemStyle: {
							color: "#67c23a",
						},
						name: "有功功率",
						areaStyle: {
							//右，下，左，上
							color: new graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "rgba(70, 166, 255,.7)",
									},
									{
										offset: 1,
										color: "rgba(70, 166, 255,.0)",
									},
								],
								false
							),
						},
					},
					// {
					//   data: yData2,
					//   type: "line",
					// symbol: "none",
					//            //    //点样式
					//           //   itemStyle: {
					//     color: "#5083FF",
					//   },
					//   name: "实时无效功率",
					//   areaStyle: {
					//     //右，下，左，上
					//     borderRadius: [2, 2, 0, 0], //柱体圆角
					//     color: new graphic.LinearGradient(
					//       0,
					//       0,
					//       0,
					//       1,
					//       [
					//         {
					//           offset: 0,
					//           color: "rgba(24,210,181,.35)",
					//         },
					//         {
					//           offset: 1,
					//           color: "rgba(30,231,231,1)",
					//         },
					//       ],
					//       false
					//     ),
					//   }
					// },
				],
			};
		},
	},
};
</script>
<style lang="scss" scoped>
.right_top_inner {
	margin-top: -8px;
}
</style>
